<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>姓：<input type="text" v-model="firstName"></div>
    <div>名：<input type="text" v-model="lastName"></div>
    <div>全名：<input type="text" v-model="fullName"></div>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    计算属性：
        在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
        计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新
        computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
    */

    /*
    计算属性：
        定义：要用的属性不存在，要通过已有属性计算得来
        get函数什么时候执行：初次读取会被执行、当依赖的数据发生改变的时候会再次执行
        优势：与methods相比，计算属性内部有缓存机制(复用)，效率更高
        备注：
            如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算属性所依赖的数据发生变化
    * */
    const app= Vue.createApp({
        data(){
            return{
                firstName: "陶",
                lastName: "品奇"
            }
        },
        computed: {
            fullName: {
                /*
                get有什么作用？当有人读取fullName的时候get会被调用，其值就是返回之后的值
                get什么时候调用？1.初次读取fullName的时候被调用 2.当所依赖的数据发生变化的时候被调用
                */
                get() {
                    console.log("fullName被读取了")
                    return this.firstName + ' ' + this.lastName
                },

                /*
                 set什么时候调用？当修改fullName的时候被调用，且会传入一个形参其值就是修改后的新值，set里面要影响依赖数据的变化
                 */
                set(value) {
                    console.log("fullName被修改了")
                    const newValue = value.split(' ')
                    this.firstName = newValue[0]
                    this.lastName = newValue[newValue.length - 1]
                }
            }
        }
        /*
        计算属性的简写
        computed:{
            fullName(){
                return this.firstName+this.lastName
            }
        }
        */
    })
    app.mount("#app")
</script>
</body>
</html>
